<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chat</title>
<link rel="stylesheet" href="./css/main.css"/>
</head>
<body>
	<div class="chat">
		<input type="text" class="chat-name" placeholder="Enter your name">
		<div class="chat-messages">
			<div class="chat-message">
			Alex:Hello there
			</div>
			<div class="chat-message">
			Alex:Hello
			</div>
			
		
		</div>
		<textarea placeholder="Type your message"></textarea>
		<div class="chat-status">Status:<span>Idle</span></div>	
	</div>
	
	     <script>   
         $(document).ready(function () {
             var socket = io.connect('http://localhost:3033');            




             // 버튼 클릭 시 Server 로 Message 를 전송 합니다.
             $('#btn').click(function () {
                 var message = $('#txt').val();




                 // Socket Server 로 message 전송
                 socket.emit('message', message);
             });

               

             // Socket Server 로 부터 message 를 받습니다.
             socket.on('message', function (data) {                 




                 // Socket Server 로 부터 받은 message 를 화면에 출력합니다.
                 $('#txtappend').append('<dd style="margin:0px;">' + data + '</dd>');
                 $('#txt').val('');
             });
         });
     </script>
</body>
</html>